<template>
  <div class="register-container">
    <div class="register-card">
      <div class="register-header">
        <div class="register-title">传统服饰在线平台</div>
        <div class="register-subtitle">用户注册</div>
      </div>

      <!-- 注册表单 -->
      <a-form :model="form" name="register" @finish="handleSubmit">
        <a-form-item
          name="userAccount"
          :rules="[
            { required: true, message: '请输入邮箱地址!' },
            { type: 'email', message: '请输入有效的邮箱地址!' },
          ]"
        >
          <a-input
            v-model:value="form.userAccount"
            placeholder="请输入邮箱地址"
            size="large"
          />
        </a-form-item>

        <a-form-item
          name="userPassword"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password
            v-model:value="form.userPassword"
            placeholder="请输入密码"
            size="large"
          />
        </a-form-item>

        <a-form-item
          name="checkPassword"
          :rules="[
            { required: true, message: '请确认密码!' },
            { validator: validatePassword },
          ]"
        >
          <a-input-password
            v-model:value="form.checkPassword"
            placeholder="请确认密码"
            size="large"
          />
        </a-form-item>

        <a-form-item
          name="verificationCode"
          :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <div class="verification-code-section">
            <a-input
              v-model:value="form.verificationCode"
              placeholder="请输入验证码"
              size="large"
            />
            <a-button
              type="primary"
              :disabled="!canSendCode || countdown > 0"
              :loading="sendingCode"
              @click="sendVerificationCode"
              size="large"
              class="code-button"
            >
              {{ countdown > 0 ? `${countdown}秒后重试` : "获取验证码" }}
            </a-button>
          </div>
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            block
            size="large"
            :loading="loading"
            class="register-button"
          >
            注册
          </a-button>
        </a-form-item>

        <div class="login-link">
          已有账号？
          <a @click="router.push('/login')">立即登录</a>
        </div>
      </a-form>

      <div class="traditional-decoration top-left"></div>
      <div class="traditional-decoration top-right"></div>
      <div class="traditional-decoration bottom-left"></div>
      <div class="traditional-decoration bottom-right"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import {
  userRegisterUsingPost,
  getEmailVerificationCodeUsingGet,
} from "@/api/userController";

const router = useRouter();
const loading = ref(false);
const sendingCode = ref(false);
const countdown = ref(0);

const form = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
  verificationCode: "",
});

// 是否可以发送验证码
const canSendCode = computed(() => {
  // 邮箱格式正则
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(form.userAccount);
});

// 验证两次密码是否一致
const validatePassword = async (_rule: any, value: string) => {
  if (value && value !== form.userPassword) {
    return Promise.reject("两次输入的密码不一致!");
  }
  return Promise.resolve();
};

// 发送验证码
const sendVerificationCode = async () => {
  if (!canSendCode.value || countdown.value > 0) return;

  try {
    sendingCode.value = true;
    const res = await getEmailVerificationCodeUsingGet({
      email: form.userAccount,
    });

    if (res.data.code === 0) {
      message.success("验证码已发送到您的邮箱，请查收");
      startCountdown();
    } else {
      message.error("发送验证码失败：" + res.data.message);
    }
  } catch (error) {
    message.error("发送验证码失败，请稍后重试");
  } finally {
    sendingCode.value = false;
  }
};

// 开始倒计时
const startCountdown = () => {
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 提交注册
const handleSubmit = async () => {
  try {
    loading.value = true;
    const res = await userRegisterUsingPost({
      userAccount: form.userAccount,
      userPassword: form.userPassword,
      checkPassword: form.checkPassword,
      verificationCode: form.verificationCode,
    });

    if (res.data.code === 0) {
      message.success("注册成功");
      router.push("/login");
    } else {
      message.error("注册失败：" + res.data.message);
    }
  } catch (error) {
    message.error("注册失败，请重试");
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.register-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/background/homeviewbackground.png") no-repeat center;
  background-size: cover;
  position: relative;
}

.register-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

.register-card {
  width: 440px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(165, 104, 60, 0.3);
  z-index: 1;
}

.register-header {
  text-align: center;
  margin-bottom: 32px;
}

.register-title {
  font-size: 28px;
  font-weight: bold;
  color: #8c4b3c;
  margin-bottom: 8px;
  font-family: "KaiTi", "楷体", serif;
}

.register-subtitle {
  font-size: 18px;
  color: #a5683c;
  font-family: "KaiTi", "楷体", serif;
}

.verification-code-section {
  display: flex;
  gap: 10px;
  align-items: center;
}

.verification-code-section .ant-input {
  flex: 1;
}

.code-button {
  width: 120px;
  height: 42px;
  background: linear-gradient(135deg, #a5683c, #8c4b3c);
  border: none;
  white-space: nowrap;
  transition: all 0.3s ease;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.code-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #8c4b3c, #a5683c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(140, 75, 60, 0.3);
}

.code-button:disabled {
  opacity: 0.7;
  background: linear-gradient(135deg, #a5683c, #8c4b3c);
  border: none;
  color: white;
}

.register-button {
  margin-top: 16px;
  height: 42px;
  background: linear-gradient(135deg, #a5683c, #8c4b3c);
  border: none;
  font-size: 16px;
  transition: all 0.3s ease;
}

.register-button:hover {
  background: linear-gradient(135deg, #8c4b3c, #a5683c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(140, 75, 60, 0.3);
}

.login-link {
  margin-top: 24px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.login-link a {
  color: #8c4b3c;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}

.login-link a:hover {
  color: #a5683c;
  text-decoration: underline;
}

/* 重置输入框样式 */
:deep(.ant-input) {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(165, 104, 60, 0.3);
  height: 42px;
  padding: 0 11px;
  font-size: 14px;
}

:deep(.ant-input-affix-wrapper) {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(165, 104, 60, 0.3);
  padding: 0 11px;
  height: 42px;
  display: flex;
  align-items: center;
}

:deep(.ant-input-affix-wrapper > input.ant-input) {
  background: transparent;
  border: none;
  box-shadow: none;
  height: 24px;
  line-height: 24px;
  padding: 0;
}

:deep(.ant-input-affix-wrapper .ant-input-suffix) {
  margin-left: 4px;
  display: flex;
  align-items: center;
}

:deep(.ant-input-password-icon) {
  color: #a5683c;
  font-size: 14px;
}

:deep(.ant-input:focus),
:deep(.ant-input-focused),
:deep(.ant-input-affix-wrapper:focus),
:deep(.ant-input-affix-wrapper-focused) {
  border-color: #a5683c;
  box-shadow: 0 0 0 2px rgba(165, 104, 60, 0.2);
}

.traditional-decoration {
  position: absolute;
  width: 40px;
  height: 40px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,3 L8,3 L8,8 L3,8 L3,3 Z M9,3 L15,3 L15,8 L9,8 L9,3 Z M16,3 L21,3 L21,8 L16,8 L16,3 Z M3,9 L8,9 L8,15 L3,15 L3,9 Z M9,9 L15,9 L15,15 L9,15 L9,9 Z M16,9 L21,9 L21,15 L16,15 L16,9 Z M3,16 L8,16 L8,21 L3,21 L3,16 Z M9,16 L15,16 L15,21 L9,21 L9,16 Z M16,16 L21,16 L21,21 L16,21 L16,16 Z" fill="%23a5683c" opacity="0.3"/></svg>');
  opacity: 0.6;
}

.top-left {
  top: 0;
  left: 0;
  transform: rotate(0deg);
}

.top-right {
  top: 0;
  right: 0;
  transform: rotate(90deg);
}

.bottom-left {
  bottom: 0;
  left: 0;
  transform: rotate(270deg);
}

.bottom-right {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

@media screen and (max-width: 576px) {
  .register-card {
    width: 90%;
    padding: 30px 24px;
  }

  .register-title {
    font-size: 24px;
  }

  .register-subtitle {
    font-size: 16px;
  }

  .code-button {
    width: 110px;
    font-size: 12px;
  }
}
</style>
